<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>全局组件与局部组件</title>
</head>

<body>
<div id="app">
  <my-component></my-component>
  <div style="background-color: aquamarine">
    <my-component></my-component>
  </div>
  <my-component2></my-component2>
</div>

<template id="MyComponent2">
  <div>
    <h3>局部测试组件</h3>
    <h2>局部测试组件内容</h2>
  </div>
</template>

<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  // const MyComponent = Vue.extend({
  //   template:`<div>
  //               <h3>测试组件</h3>
  //               <h2>测试组件内容</h2>
  //             </div>`
  // })

  // Vue.component("MyComponent", MyComponent)

  Vue.component("MyComponent", {
    template:`<div>
                  <h3>测试组件</h3>
                  <h2>测试组件内容</h2>
                </div>`
  })

  // const app = new Vue({ //初始化一个VUE实例
  //   el: '#app',     // 用于页面渲染VUE实例的元素
  //   components:{
  //     MyComponent2:{
  //       template: `<div>
  //                     <h3>局部测试组件</h3>
  //                     <h2>局部测试组件内容</h2>
  //                   </div>`
  //     }
  //   }
  // })


  const app = new Vue({ //初始化一个VUE实例
    el: '#app',     // 用于页面渲染VUE实例的元素
    components:{
      MyComponent2:{
        template: '#MyComponent2'
      }
    }
  })
</script>
</body>

</html>